@charset "utf-8";

@import 'variable';

@import "reset.less";

.adapter(@i) when (@i>=1){
  @media(min-width:extract(@screen,@i)){
    html{
      font-size:@base/@psdWidth*extract(@screen,@i);
    }
  }
  .adapter(@i - 1);
}
.adapter(@len);


.sn_topBar{
  .tb;
  top:0;
  height:90rem/@base;
  a{
    width: 90rem/@base;
    height: 90rem/@base;
    position: absolute;
    top: 0;
    &.icon_category{
      left: 0;
      background: url("../images/icon_category.png") no-repeat center /44rem/@base 70rem/@base;
    }
    &.icon_car{
      right: 0;
      background: url("../images/icon_cart.png") no-repeat center /63rem/@base 68rem/@base;
    }
  }
  form{
    .w100;
    height:100%;
    padding:0 90rem/@base;
    position: relative;
    span{
      width:30rem/@base;
      height: 30rem/@base;
      position: absolute;
      top:30rem/@base;
      left:100rem/@base;
      background: url("../images/icon_search.png") no-repeat center;
    }
    input{
      .w100;
      margin-top:15rem/@base;
      background-color: rgba(255,255,255,.3);
      font-size: 24rem/@base;
      border-radius:5rem/@base;
      height: 60rem/@base;
      padding-left:50rem/@base ;
    }
  }
}


.sn_nav{
  .w100;
  li{
    .f_left;
    width:100%/5;
    padding: 20px 0;
    a{
      margin: 0 auto;
      display: block;
      width:100%;
      text-align: center;
      img{width:80rem/@base;height: 80rem/@base;font-size:0 }
      p{
        text-align: center;
        font-size: 20rem/@base;
        color: #333;
      }
    }
  }
}

.sn_tabs{
  .tb;
  bottom:0;
  height:100rem/@base;
  ul{
    width:100%;
    li{
      width:100%/5;
      padding-top: 10rem/@base;
      float: left;
      a{
        display: block;
        width:100%;
        text-align: center;
        span{
          font-size: 40rem/@base;
        }
        p{
          margin-top: 5rem/@base;
          text-align: center;
          font-size: 20rem/@base;
        }
      }
    }
  }
}